<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>文件管理系统</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
			}

			body {
				background-color: #f5f5f5;
				color: #333;
			}

			.container {
				max-width: 1200px;
				margin: 0 auto;
				padding: 20px;
			}

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				padding-bottom: 15px;
				border-bottom: 1px solid #e0e0e0;
			}

			.logo {
				font-size: 24px;
				font-weight: bold;
				color: #2196F3;
			}

			.user-info {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.avatar {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: #2196F3;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
			}

			.toolbar {
				display: flex;
				gap: 10px;
				margin-bottom: 20px;
				padding: 15px;
				background: white;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			.btn {
				padding: 10px 15px;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				font-weight: 500;
				display: flex;
				align-items: center;
				gap: 5px;
				transition: all 0.3s;
			}

			.btn-primary {
				background-color: #2196F3;
				color: white;
			}

			.btn-primary:hover {
				background-color: #0b7dda;
			}

			.btn-outline {
				background-color: transparent;
				border: 1px solid #ddd;
				color: #666;
			}

			.btn-outline:hover {
				background-color: #f9f9f9;
			}

			.breadcrumb {
				display: flex;
				align-items: center;
				gap: 5px;
				margin-bottom: 20px;
				padding: 15px;
				background: white;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			.breadcrumb-item {
				cursor: pointer;
				color: #2196F3;
			}

			.breadcrumb-item:hover {
				text-decoration: underline;
			}

			.breadcrumb-separator {
				color: #999;
			}

			.file-list {
				background: white;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				overflow: hidden;
			}

			.list-header {
				display: grid;
				grid-template-columns: 3fr 1fr 1fr 1fr;
				padding: 15px;
				background-color: #f9f9f9;
				font-weight: bold;
				border-bottom: 1px solid #eee;
			}

			.list-item {
				display: grid;
				grid-template-columns: 3fr 1fr 1fr 1fr;
				padding: 15px;
				border-bottom: 1px solid #eee;
				cursor: pointer;
				transition: background-color 0.2s;
			}

			.list-item:hover {
				background-color: #f5f5f5;
			}

			.item-name {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.folder-icon {
				color: #FFC107;
			}

			.file-icon {
				color: #2196F3;
			}

			.item-actions {
				display: flex;
				gap: 10px;
				justify-content: flex-end;
			}

			.action-btn {
				background: none;
				border: none;
				cursor: pointer;
				color: #666;
				padding: 5px;
			}

			.action-btn:hover {
				color: #2196F3;
			}

			.empty-state {
				text-align: center;
				padding: 40px;
				color: #999;
			}

			.modal {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1000;
			}

			.modal-content {
				background: white;
				border-radius: 8px;
				padding: 20px;
				width: 400px;
				max-width: 90%;
			}

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
			}

			.modal-title {
				font-size: 18px;
				font-weight: bold;
			}

			.close-btn {
				background: none;
				border: none;
				font-size: 20px;
				cursor: pointer;
				color: #999;
			}

			.form-group {
				margin-bottom: 15px;
			}

			.form-label {
				display: block;
				margin-bottom: 5px;
				font-weight: 500;
			}

			.form-input {
				width: 100%;
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 4px;
			}

			.modal-footer {
				display: flex;
				justify-content: flex-end;
				gap: 10px;
				margin-top: 20px;
			}

			@media (max-width: 768px) {

				.list-header,
				.list-item {
					grid-template-columns: 1fr;
					gap: 10px;
				}

				.item-actions {
					justify-content: flex-start;
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<div class="header">
					<div class="logo">文件管理系统</div>
					<div class="user-info">
						<div class="avatar">User</div>
						<div>欢迎，{{ user.name }}</div>
					</div>
				</div>

				<div class="toolbar">
					<button class="btn btn-primary" @click="showCreateFolderModal">
						<i class="mdi mdi-folder-plus"></i> 新建文件夹
					</button>
					<button class="btn btn-primary" @click="triggerFileUpload">
						<i class="mdi mdi-upload"></i> 上传文件
					</button>
					<input type="file" ref="fileInput" @change="handleFileUpload" style="display: none">
				</div>

				<div class="breadcrumb">
					<span class="breadcrumb-item" @click="navigateTo(null)">根目录</span>
					<span class="breadcrumb-separator">/</span>
					<span v-for="(item, index) in path" :key="index">
						<span class="breadcrumb-item" @click="navigateTo(item.id)" v-if="index < path.length - 1">
							{{ item.name }}
						</span>
						<span v-else>{{ item.name }}</span>
						<span class="breadcrumb-separator" v-if="index < path.length - 1">/</span>
					</span>
				</div>

				<div class="file-list">
					<div class="list-header">
						<div>名称</div>
						<div>大小</div>
						<div>修改日期</div>
						<div>操作</div>
					</div>

					<div v-if="items.length === 0" class="empty-state">
						<i class="mdi mdi-folder-open-outline" style="font-size: 48px;"></i>
						<p>此文件夹为空</p>
					</div>

					<div v-else>
						<div class="list-item" v-for="item in items" :key="item._id">
							<div class="item-name" @click="handleItemClick(item)">
								<i class="mdi"
									:class="item.kind === 'Folder' ? 'mdi-folder folder-icon' : 'mdi-file file-icon'"></i>
								{{ item.name }}
							</div>
							<div>{{ item.kind === 'File' ? formatFileSize(item.size) : '-' }}</div>
							<div>{{ formatDate(item.updatedAt) }}</div>
							<div class="item-actions">
								<button class="action-btn" v-if="item.kind === 'File'" @click="downloadFile(item)">
									<i class="mdi mdi-download"></i>
								</button>
								<button class="action-btn" @click="renameItem(item)">
									<i class="mdi mdi-pencil"></i>
								</button>
								<button class="action-btn" @click="deleteItem(item)">
									<i class="mdi mdi-delete"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 新建文件夹模态框 -->
			<div class="modal" v-if="showFolderModal">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">新建文件夹</div>
						<button class="close-btn" @click="showFolderModal = false">&times;</button>
					</div>
					<div class="form-group">
						<label class="form-label">文件夹名称</label>
						<input type="text" class="form-input" v-model="newFolderName" placeholder="输入文件夹名称">
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline" @click="showFolderModal = false">取消</button>
						<button class="btn btn-primary" @click="createFolder">创建</button>
					</div>
				</div>
			</div>

			<!-- 重命名模态框 -->
			<div class="modal" v-if="showRenameModal">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">重命名</div>
						<button class="close-btn" @click="showRenameModal = false">&times;</button>
					</div>
					<div class="form-group">
						<label class="form-label">新名称</label>
						<input type="text" class="form-input" v-model="newItemName" :placeholder="selectedItem.name">
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline" @click="showRenameModal = false">取消</button>
						<button class="btn btn-primary" @click="renameConfirm">确认</button>
					</div>
				</div>
			</div>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					user: {
						name: '测试用户',
						_id: 'user123' // 实际应用中应从登录信息获取
					},
					items: [],
					currentFolder: null,
					path: [],
					showFolderModal: false,
					newFolderName: '',
					showRenameModal: false,
					selectedItem: null,
					newItemName: ''
				},
				mounted() {
					this.loadItems();
				},
				methods: {
					async loadItems() {
						try {
							// 模拟API调用
							// 实际应用中应使用axios调用后端API
							console.log('加载项目，父文件夹ID:', this.currentFolder);

							// 模拟数据
							this.items = [{
									_id: '1',
									name: '文档',
									kind: 'Folder',
									size: 0,
									updatedAt: new Date(),
									path: '/文档'
								},
								{
									_id: '2',
									name: '图片',
									kind: 'Folder',
									size: 0,
									updatedAt: new Date(),
									path: '/图片'
								},
								{
									_id: '3',
									name: '报告.pdf',
									kind: 'File',
									size: 2048576,
									updatedAt: new Date(),
									path: '/报告.pdf'
								},
								{
									_id: '4',
									name: '数据.xlsx',
									kind: 'File',
									size: 1048576,
									updatedAt: new Date(),
									path: '/数据.xlsx'
								}
							];
						} catch (error) {
							console.error('加载项目失败:', error);
							alert('加载失败，请重试');
						}
					},

					handleItemClick(item) {
						if (item.kind === 'Folder') {
							this.navigateTo(item._id);
						} else {
							this.downloadFile(item);
						}
					},

					navigateTo(folderId) {
						this.currentFolder = folderId;
						this.loadItems();

						// 更新路径面包屑
						// 实际应用中应从API获取完整路径信息
						if (!folderId) {
							this.path = [{
								name: '根目录',
								id: null
							}];
						} else {
							// 模拟路径数据
							this.path = [{
									name: '根目录',
									id: null
								},
								{
									name: '当前文件夹',
									id: folderId
								}
							];
						}
					},

					showCreateFolderModal() {
						this.newFolderName = '';
						this.showFolderModal = true;
					},

					async createFolder() {
						if (!this.newFolderName.trim()) {
							alert('请输入文件夹名称');
							return;
						}

						try {
							// 实际应用中应调用API
							console.log('创建文件夹:', this.newFolderName, '父文件夹:', this.currentFolder);

							// 模拟成功响应
							this.showFolderModal = false;
							this.loadItems(); // 刷新列表
						} catch (error) {
							console.error('创建文件夹失败:', error);
							alert('创建失败，请重试');
						}
					},

					triggerFileUpload() {
						this.$refs.fileInput.click();
					},

					async handleFileUpload(event) {
						const file = event.target.files[0];
						if (!file) return;

						try {
							// 实际应用中应调用API上传文件
							console.log('上传文件:', file.name, '父文件夹:', this.currentFolder);

							// 模拟成功响应
							this.loadItems(); // 刷新列表
						} catch (error) {
							console.error('上传文件失败:', error);
							alert('上传失败，请重试');
						}
					},

					renameItem(item) {
						this.selectedItem = item;
						this.newItemName = item.name;
						this.showRenameModal = true;
					},

					async renameConfirm() {
						if (!this.newItemName.trim()) {
							alert('请输入新名称');
							return;
						}

						try {
							// 实际应用中应调用API
							console.log('重命名项目:', this.selectedItem._id, '新名称:', this.newItemName);

							// 模拟成功响应
							this.showRenameModal = false;
							this.loadItems(); // 刷新列表
						} catch (error) {
							console.error('重命名失败:', error);
							alert('重命名失败，请重试');
						}
					},

					async deleteItem(item) {
						if (!confirm(`确定要删除"${item.name}"吗？`)) return;

						try {
							// 实际应用中应调用API
							console.log('删除项目:', item._id);

							// 模拟成功响应
							this.loadItems(); // 刷新列表
						} catch (error) {
							console.error('删除失败:', error);
							alert('删除失败，请重试');
						}
					},

					async downloadFile(file) {
						try {
							// 实际应用中应调用API
							console.log('下载文件:', file._id);

							// 模拟下载
							alert(`开始下载: ${file.name}`);
						} catch (error) {
							console.error('下载失败:', error);
							alert('下载失败，请重试');
						}
					},

					formatFileSize(bytes) {
						if (bytes === 0) return '0 B';
						const k = 1024;
						const sizes = ['B', 'KB', 'MB', 'GB'];
						const i = Math.floor(Math.log(bytes) / Math.log(k));
						return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
					},

					formatDate(date) {
						return new Date(date).toLocaleDateString();
					}
				}
			});
		</script>
	</body>
</html>